<template>
  <div id="app">
    <h2>++++++++++++++++module+++++++++++++++++++</h2>
    <h2>{{$store.state.a.name}}</h2>
    <button @click="updateName">修改module中的名字</button>

    <h2>==========mutations数据的响应式原理=========</h2>
    <h2>{{$store.state.info}}</h2>
    <button @click="updateInfo">修改info</button>

    <h2>{{$store.state.counter}}</h2>
    <button @click="add">+</button>
    <button @click="sub">-</button>
    <button @click="addCount(5)">+5</button>
    <button @click="addCount(10)">+10</button>
    <button @click="addStudent(student)">添加学生</button>
    <hello-vuex :counter="counter"/>

    <h2>=======getters======</h2>
    <h2>{{$store.getters.powerCounter}}</h2>

  </div>
</template>

<script>
import HelloVuex from "./components/HelloVuex";
export default {
  name: 'App',
  components: {
    HelloVuex
  },
  data() {
    return{
      message: '我是组件',
      counter: 0
    }
  },
  methods: {
    add() {
      this.$store.commit('increment')
    },
    sub() {
      this.$store.commit('decrement')
    },
    addCount(count) {
      //普通的提交封装
      // this.$store.commit("addCount",count)
      //特殊的提交封装
      this.$store.commit({
        type:"addCount",
        count
      })
    },
    addStudent() {
      const student = {id: 5,name: 'Curry',age: 31}
      this.$store.commit("addStu",student)
    },
    updateInfo() {
      // this.$store.commit("updateInfo")
      //想要用actions里的方法，不能使用commit提交
      this.$store.dispatch('actionsInfo',{
        message: '我是携带的信息',
        success: () => {
          console.log('info修改成功')
        }
      })
    },

    updateName() {
      this.$store.commit('updateName')
    }
  }
}
</script>

<style>

</style>
